<template>
	<view>
		<view class="header-img-0" :style="{height:StatusBarRpx+'rpx'}"> </view>
		<view class="page_header" :style="{height:CustomTitleBar+'rpx', paddingRight:CustomTitleBarRight+'rpx'}">
			<u-gap height="30"></u-gap>
			<view class="top_search">
				<u-search placeholder="搜索" placeholder-color="#B5B5B5"  bg-color="#fff" search-icon-color="#eec8ff" :show-action="false" :clearabled="true" v-model="s_key"></u-search>
			</view>
		</view>
		<u-gap height="30"></u-gap>
		<view class="banner">
			<view class="page_swiper">
				<u-swiper :list="bannerlist" 
					@click="clickSwiper"
					border-radius="20" 
					mode="none"
					img-mode="aspectFill"></u-swiper>
			</view>
		</view>
		<scroll-view scroll-x="true">
			<view class="menu n-flex-row n-wrap">
				<view class="list" v-for="(item,idx) in navList" :key="idx"
					@click="$.to('/pages/mall/list?id='+item.id+'&name='+item.title)">
					<image :src="item.image" mode=""></image>
					<view>{{item.title}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="goods-list">
			<view class="goods-list-item" v-for="(item,idx) in goodsList" :key="idx" @click="details(item.id)">
				<view class="item-img">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="item-bottom">
					<view class="i-b-title">{{item.title}}</view>
					<view class="i-b-price">￥ {{ (item.price * 1) }}</view>
					<view class="i-b-other">
						<view class="i-b-other-0">{{ $t('精选') }}</view>
						<view class="i-b-other-1">{{item.integral}}{{ $t('糯米值') }}</view>
					</view>
				</view>
			</view>
		</view>
		<u-tabbar v-model="current" height="56px" :border-top="false" bg-color="#fff" inactive-color="#666"
			active-color="#37003F" :list="tabbar" ></u-tabbar>
	</view>
</template>

<script>
	import {
		tabbar
	} from "@/common/tabbar.js"
	export default {
		data() {
			return {
				current: 1,
				tabbar: tabbar,
				background: {

					background: "url(" + require('@/static/image/vo.webp') + ") no-repeat",
					backgroundSize: 'cover',

				},
				goods_navlist: [{
					name: '综合',
					value: 'all',
					key: 'id',
				}, {
					name: '价格升序',
					value: 'asc',
					key: 'price',
				}, {
					name: '价格降序',
					value: 'desc',
					key: 'price',
				}],
				goods_tj: '',
				goods_tj2: '',
				current: 2,
				bannerlist: [],
				saixuanShow: false,
				height: '67',
				goodsList: [],
				page: 1,
				navList: [],
				bi: '',
				diPic: '',
				centerImge: null
			}
		},
		// 触底
		onReachBottom() {
			if (this.goodsList.length < this.page * 10) {
				return
			}
			this.page++;
			this.getGoods()
		},
		onLoad() {
			this.getBanner()
			this.getNav()
			this.goods_tj = this.goods_navlist[2].value;
			this.goods_tj2 = this.goods_navlist[2].key;
			this.getGoods()
		},
		onShow() {
			this.getBi()
			this.getCenterImge()
		},
		methods: {
			gotobanner(info) {
				console.log(info)
				// uni.navigateTo({
				// 	url:'webview'
				// })
				if (info.link_url_type == 1) { //指定盲盒跳转
					uni.navigateTo({
						url: '/pages/home/kaixiang?id=' + info.link_url + '&music=' + this.muteBgMusic
					})
				} else if (info.link_url_type == 2) { //跳转外部网站
					uni.navigateTo({
						url: '/pages/tabBar/h5'
					})
					setTimeout(() => {
						uni.$emit('go_h5', {
							url: info.link_url
						})
					}, 600)
				}
			},
			getBanner() {
				this.$http({
					url: "api/common/get_advert",
					data: {
						type: 3
					}
				}).then(res => {
					console.log(res, "轮播");
					if (res.data.code == 1) {
						this.bannerlist = res.data.data
					}
					this.getZhongButu();
				}).catch(err => {});
			},
			getCenterImge() {
				this.$http({
					url: "api/common/get_advert",
					data: {
						type: 4
					}
				}).then(res => {
					console.log(res, "中间");
					if (res.data.code == 1) {
						this.centerImge = res.data.data[0]
					}
				}).catch(err => {});
			},
			//获取中部图片
			getZhongButu() {
				this.$http({
					url: "api/common/get_advert",
					data: {
						type: 4
					}
				}).then(res => {
					if (res.data.code == 1) {
						let pic
						res.data.data.forEach((item, index) => {
							pic = item.image
							return
						})
						this.diPic = pic
					}
				}).catch(err => {});
			},
			getNav() {
				this.$http({
					url: "api/common/get_goods_menu",
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.navList = res.data.data
					}
				}).catch(err => {});
			},
			getGoods() {
				this.$http({
					url: "api/common/get_goods_list",
					data: {
						page: this.page,
						goods_tj: this.goods_tj,
						goods_tj2: this.goods_tj2,
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						var data = res.data.data
						this.goodsList = this.goodsList.concat(data);
					}
				}).catch(err => {});
			},
			// 获取糯米值
			getBi() {
				this.bi = uni.getStorageSync('user').integral
			},
			change(idx) {
				this.current = idx;
				this.goods_tj = this.goods_navlist[idx].value;
				this.goods_tj2 = this.goods_navlist[idx].key;
				this.page = 1;
				this.goodsList = [];
				this.getGoods();
				// alert(this.goods_navlist[idx].value)
			},
			details(id) {
				uni.navigateTo({
					url: '/pages/mall/goodsInfo?id=' + id
				})
			},
		}
	}
</script>

<style>
	page {
		background: #f2fafc url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240905/ef044002e484978c199820dd1427182b.jpg") no-repeat top center;
		background-size: 100% auto;
	}
</style>
<style lang="scss" scoped>
	// @import url("../../static/css/mall.css");
	// .centerImge-box{
	// 	width: 690rpx;
	// 	height: 300rpx;
	// 	margin: 0rpx auto 20rpx auto;
	// 	image{
	// 		width: 100%;
	// 		height: 100%;
	// 	}
	// }
	.page_header{
		display:flex;
		align-items: center;
	}
	.top_search{ margin:0 30rpx; width: 100%; }
	.banner{ margin:0 30rpx; }
	.header-img {
		width: 750rpx;
		height: 740rpx;
		box-sizing: border-box;

		.header-img-1 {
			// background-image: url('https://img.alicdn.com/imgextra/i4/2215984279448/O1CN0144cLNG2JfEt4CPiUV_!!2215984279448.jpg');
			background-size: 100% 100%;
		}

	}

	.goods-list {
		padding:0 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.goods-list-item {
			box-sizing: border-box;
			width: 48%;
			border-radius: 30rpx;
			margin: 20rpx 0;
			overflow: hidden;
			.item-img {
				width: 100%;
				height: 343rpx;
				padding-top: 1rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.item-bottom {
				background-color: #fff;
				padding: 20rpx;
				box-sizing: border-box;

				.i-b-title {
					font-size: 28rpx;
					font-weight: 400;
					color: #070820;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1; //行数需设置
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					line-clamp: 1;
				}

				.i-b-price {
					font-size: 28rpx;
					color: #ff6a38;
					font-weight: bold;
					margin-top: 10rpx;
				}
			}
		}

		.i-b-other {
			display: flex;
			margin-top: 10rpx;

			&-0 {
				background: linear-gradient(90deg, #c6e3fe 0%, #a7a8f9 51%, #886cf2 100%);
				padding: 6rpx 12rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #fff;
				border-radius: 10rpx;
			}

			&-1 {
				margin-left: 20rpx;
				padding: 8rpx 12rpx;
				border: 1rpx solid #a29ef8;
				border-radius: 10rpx;
				font-size: 22rpx;
				color: #a29ef8;
			}
		}
	}

	.menu {
		padding-top: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: nowrap;
		width: 750rpx;
		box-sizing: border-box;

		// display: flex;
		// justify-content: space-between;
		// background-color: #fff;
		.list {
			width: 17%;
			text-align: center;
			flex-shrink: 0;
			font-size: 24rpx;
			margin: 10rpx;
			color: #666;
			// border: 1px solid #ff6b37;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.list image {
			width: 80rpx;
			height: 80rpx;
		}

		.list view {
			margin-bottom: 20rpx;
			margin-top: 20rpx;
		}
	}

	.header-serve {
		display: flex;
		color: #fff;
		align-items: center;
		height: 88rpx;
		line-height: 88rpx;
		padding: 30rpx;

		view {
			margin: 10rpx;
		}

		.line {
			margin: 8rpx 20rpx;
			border-left: 1rpx solid #88a6a4;
			width: 1rpx;
			height: 20rpx;
		}

	}
</style>